<template>
  <div class="main">
    <div class="jilu">
      <span class="xzft" @click="chuxian">新增访谈</span>
      <span class="xzft">编辑访谈</span>
      <span class="xzft" @click="delect">删除访谈</span>
      <span class="xzft">导出</span>
    </div>
    <div class="ftlist">
      <el-table
        ref="multipleTableRef"
        :default-sort="{ prop: 'date', order: 'descending' }"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{
          textAlign: 'right',
        }"
        :cell-style="{
          textAlign: 'right',
        }"
        @select="delectdata"
        show-overflow-tooltip:ture
      >
        <el-table-column type="selection" width="35" />
        <el-table-column label="访谈对象" width="flex1" property="name">
          <!-- <template #default="scope">{{ scope.row.name }}</template> -->
        </el-table-column>
        <el-table-column
          property="time"
          label="访谈时间"
          :sortable="ture"
          width="flex1"
        >
          <template #default="scope">
            <span>{{ timestampToTime(scope.row.time) }}</span>
          </template>
        </el-table-column>
        <el-table-column property="teacher" label="访谈负责人" width="flex1" />
        <el-table-column label="查看" width="flex1">
          <template #default="scope">
            <el-button text @click="open(scope.row.id)">访谈内容</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template #default="scope">
            <span>编辑</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="pageChange"
    />
  </div>
  <div class="xzbox" v-if="none">
    <div class="topbox">
      <div class="inpbox">
        <div class="inptext">访谈对象</div>
        <el-input v-model="input" placeholder="请输入姓名" clearable />
      </div>
      <div class="mainbox">
        <div style="margin: 20px 0" />
        <el-input
          v-model="textarea2"
          :autosize="{ minRows: 15, maxRows: 15 }"
          type="textarea"
          placeholder="请输入访谈内容"
        />
      </div>
      <div>
        <span class="inptext">访谈时间</span>
        <div class="demo-date-picker">
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="请选择访谈日期"
              :size="size"
            />
          </div>
        </div>
      </div>
      <div class="inpbox">
        <span class="inptext">访谈负责人</span
        ><el-input v-model="input1" placeholder="请输入姓名" clearable />
      </div>
    </div>
    <div class="bottombox">
      <el-button type="success" round @click="tijiao">提交</el-button>
      <el-button type="danger" round @click="guanbi">关闭</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElTable } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import "@/mock/pos";
import axios from "axios";

const ture = true;
const flase = false;
let none = ref(flase);
const textarea2 = ref("");
let total = ref(0);

const chuxian = () => {
  return (none.value = ture);
};
const guanbi = () => {
  return (none.value = flase);
};

// 中国标准时间 转换成 年月日
function formatDateTime(date: any) {
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  var h = date.getHours();
  var minute = date.getMinutes();
  minute = minute < 10 ? "0" + minute : minute;
  // return y + '-' + m + '-' + d+' '+h+':'+minute;
  return y + "-" + m + "-" + d;
}

const tijiao = () => {
  // if (input.value !== "") {
  //   if (textarea2.value !== "") {
  //     if (value1.value !== "") {
  //       if (input1.value !== "") {
  //         tableData.value.push({
  //           Ctext: textarea2.value,
  //           name: input.value,
  //           teacher: input1.value,
  //           time: formatDateTime(value1.value),
  //         });
  //         console.log(formatDateTime(value1.value));
  //         none.value = flase;
  //         return (
  //           (textarea2.value = ""),
  //           (input.value = ""),
  //           (input1.value = ""),
  //           (value1.value = "")
  //         );
  //       }
  //     }
  //   }
  // }
};
interface User {
  name: string;
  teacher: string;
  time: number;
  id: number;
  Ctext: string;
}

const getDate = (page?: number) => {
  axios
    .post("/api/pos/list", { pageSize: 10, currentPage: page || 1 })
    .then((res) => {
      tableData.value = res.data.result;
      total.value = res.data.count;
    });
};

onMounted(() => {
  getDate();
});

const pageChange = (page: number) => {
  getDate(page);
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const input = ref("");

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const tableData = ref([]);
const size = ref<"default" | "large" | "small">("default");

function timestampToTime(timestamp: number) {
  if (timestamp === 0 || timestamp == null) {
    return "";
  } else {
    var date = new Date(timestamp);
    var Y = date.getFullYear() + "-";
    var M =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    return Y + M + D;
  }
}

const value1 = ref("");
const input1 = ref("");

const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
  {
    text: "Yesterday",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "A week ago",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

const open = (id: any) => {
  ElMessageBox.alert("This is a message", "内容详情");
};

let selectiondata: any = [];
const delectdata = (selection: any, row: any) => {
  selectiondata = selection.map((item: any) => item.id);
  console.log(selectiondata);
};
const delect = () => {
  axios
    .post("/api/pos/del", {
      id: selectiondata,
    })
    .then((res) => {
      getDate();
    });
};
</script>

<style scoped lang="less">
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

:deep(.demo-date-picker .block) {
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
  width: 400px;
  height: 40px;
}
.el-input--large {
  border-radius: 20px;
}
.top {
  display: flex;
  justify-content: space-between;
}
.box {
  width: 100%;
  height: 100%;
}
.jzbtn {
  width: 100px;
  height: 40px;
  background-color: #1d8f8d;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  color: white;
  cursor: pointer;
}
.xsbtn {
  width: 100px;
  height: 40px;
  background-color: #e3f5f6;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  color: #1d8f8d;
  margin-left: 10px;
  cursor: pointer;
}
.main {
  width: 100%;
  background-color: white;
  margin-top: 15px;
  padding: 20px 15px 0px 15px;
  box-sizing: border-box;
}
.xzft {
  width: 60px;
  height: 30px;
  background-color: #e3f5f6;
  display: inline-block;
  line-height: 30px;
  text-align: center;
  color: #1d8f8d;
  margin-right: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
}
.ftlist {
  margin-top: 20px;
}

.xzbox {
  width: 700px;
  height: 500px;
  position: fixed;
  background-color: #e3f5f6;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -350px;
  z-index: 99;
  box-sizing: border-box;
  padding: 30px;
  flex-wrap: wrap;
}
.inptext {
  width: 150px;
  font-size: 16px;
  color: #1d8f8d;
}
.inpbox {
  width: 150px;
  height: 35px;
  margin-right: 20px;
}
.block {
  padding: 0;
}
.topbox {
  display: flex;
}
.bottombox {
  position: absolute;
  bottom: 30px;
  left: 33%;
}
.mainbox {
  width: 92%;
  height: 250px;
  position: absolute;
  top: 74px;
}
.el-button {
  width: 100px;
  margin-right: 30px;
}
.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>
